fix(button-toggle): extend the item hover zone over the group's gap and padding (#DS-4164) - #1892
fix(button-toggle): extend the item hover zone over the group's gap and padding (#DS-4164)#1892lskramarov wants to merge 3 commits into
Conversation
…nd padding (#DS-4164)
|
Visit the preview URL for this PR (updated for commit f95cbac): https://koobiq-next--prs-1892-h3z4x0ev.web.app (expires Sun, 16 Aug 2026 14:03:09 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c |
🚨 E2E tests failedReview the report for details. 💡 Comment |
There was a problem hiding this comment.
Pull request overview
Extends kbq-button-toggle pointer hit-testing so each toggle’s interactive/hover area covers the group’s inter-item gap and surrounding padding, preventing “dead strips” between segments while keeping rendered pixels unchanged.
Changes:
- Updated button-toggle styles to avoid clipping and to add
::before-based hit-area expansion that tiles the gap/padding across items (horizontal + vertical). - Introduced new size tokens to parameterize hit-area offsets (gap share + group padding).
- Added Playwright E2E coverage to validate hit-testing, hover, click activation, and RTL mirroring.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/components/button-toggle/e2e.playwright-spec.ts | Adds E2E tests that probe elementFromPoint ownership and validate hover/click behavior in gutter areas (incl. RTL). |
| packages/components/button-toggle/button-toggle.scss | Implements expanded hit-area via :before and switches item overflow to visible with min-width: 0 to preserve truncation behavior. |
| packages/components/button-toggle/button-toggle-tokens.scss | Adds CSS variables to compute hit-area reach based on border width, half-gap, and group padding. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
|
/approve-snapshots |
|
🔄 Updating snapshots. |
|
✅ Snapshots updated! |
No description provided.